<template>
    <div class="wrap">
        <div class="top"> Login登录/注册 </div>              
        <van-tabs v-model:active="active">
            <van-tab title="邮箱登录">                
                <van-form @submit="onLogin">
                    <van-cell-group inset>
                            <van-field
                                v-model="login_email"
                                name="login_email"
                                label="邮箱"
                                placeholder="登录邮箱"
                                :rules="[{ required: true, message: '填写用来登录的邮箱' }]"
                            />
                            <van-field
                                v-model="login_password"
                                type="password"
                                name="login_password"
                                label="密码"
                                placeholder="密码"
                                :rules="[{ required: true, message: '请填写密码' }]"
                            />
                        </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">
                        登录
                        </van-button>
                    </div>
                </van-form>
            </van-tab>
            <van-tab title="注册"> <b style="font-size:20px;margin:40px auto;"> 注册邮箱鉴权 </b>     

                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field
                            v-model="email"
                            name="email"
                            label="邮箱"
                            placeholder="邮箱"
                            :rules="[{ required: true, message: '填写用来注册的邮箱' }]"
                            />
                            <van-field
                            v-model="password"
                            type="password"
                            name="password"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                            />
                        </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round  block type="info" native-type="submit">
                        提交
                        </van-button>
                    </div>
                </van-form>

            </van-tab>
          
        </van-tabs>
        <div style="margin-bottom:10px;"> <b style="font-size: 26px;color:red;"> **先登录同步数据,再进行录入** </b> <br> </div>
        <van-button type="warning" @click="toRanking" > 前 往 户 型 录 入 </van-button> <br> <br>
        <hr style="width:60%; color； lightgray;"/> <br>
        <van-button type="primary" @click="toSong" > 户 型 图 鉴 </van-button> <br> <br>
        <van-button type="primary" @click="toPlexSearch" > 查 询 户 型 </van-button>
        <div class="downPic"> 
            <van-image
                width="9rem"
                height="5rem"
                fit="contain"
                src="https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/apartment/%E7%BB%BF%E5%8C%96%E5%B0%8F%E5%8C%BA.png?sign=8815517d3ad81f5bc45e37aa9f4007f9&t=1663038422"
            />
        </div>
    </div>



</template>

<script >
import { ref, onMounted, getCurrentInstance, inject } from 'vue';
import {useRouter, useRoute} from 'vue-router'
import moment from 'moment'
import { Dialog } from 'vant'


 export default { 
    setup(){
        let router = useRouter();
        let route = useRoute()
        const activeId = ref(1);
        const activeIndex = ref(0);
        const username = ref('');
        const password = ref('');
        const department = ref('')
        const user_score = ref('')
        const telphone = ref('')
        const email = ref('');
        const active = ref(0);
        const login_email = ref('')
        const login_password = ref('')

        const onitemclick = (data)=>{
                    console.log(data)
                    router.push({
                        name: 'complexDetail',
                        query: { name: data.text, mainIndex: activeIndex.value  }
                    })
                }
        


        const onSubmit = (values) => {
                        if(values.email){
                            console.log('submit', values);                      
                            cloud
                            .auth()
                            .signUpWithEmailAndPassword(values.email, values.password)
                            .then(() => {
                                // 发送验证邮件成功
                                console.log('email注册成功？')
                                email.value = ''
                                password.value = ''
                                alert(`${values.email}连接成功!👇最后一步👇\n !!!!前往您的邮箱点击验证链接完成账号注册!!!!!`)
                            }).catch( (error)=>{
                                console.log('出错', error)
                                alert(error)
                            } )
                            }else{
                                alert('未填写')
                            }                                                                               
                    };

        const onLogin = (values) => {
            console.log('login', values);      
            cloud
            .auth()
            .signInWithEmailAndPassword(values.login_email, values.login_password)
            .then((loginState) => {
                // 登录成功
                console.log('KKK', loginState)
                alert('登录成功')
            }).catch( (error)=>{
                                console.log('登录出错', error)
                                alert(error)
                            } )
        }

        const toRanking = ()=>{
            console.log('makeComplex')
            router.push({
                name: 'makeComplex'
            })
        }
        const toSong = ()=> {
            router.push({
                name: 'apartmentPic'
            })
        }
        const toPlexSearch = ()=>{
            console.log(11)
            router.push({
                name: 'complexDetail',
                query: { name: 'search', mainIndex: 1  }
            })
        }

        onMounted(async()=>{
                        console.log('index K歌 test')          
                    })
                const cloud = inject('$cloud')
                return {
                        router,
                        route ,
                        active,
                        email,
                        // activeId ,
                        // activeIndex ,
                        // username ,
                        password,  
                        // department, 
                        // user_score ,
                        // telphone ,
                        // items ,
                        onSubmit,
                        toRanking,
                        login_email,
                        login_password,
                        onLogin,
                        toSong,
                        toPlexSearch
                }
            }
  }




</script>

<style lang="scss">
    body {
        margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
    }
    .top{
        margin: 7px auto;
        margin-bottom: 16px;
        width: 100%;
        background: lightcyan;
        padding-bottom: 5px;
        padding-top: 5px;
        font-weight: bold;
        font-size: 17px;
    }
    .tree{
        height: 500px !important;
    }
    .titleSlot{
        color: white ;
        font-weight: bold;
        background-color: darkgoldenrod;
        padding: 5px;
        width: 20px;
        font-size: 20px;
    }
    .downPic{
        // background: lightblue ;
        position: absolute;
        bottom: 10px;
        width: 100%;
        opacity: 0.8;
        z-index: -1;
    }
</style>